/**
 * webpack 通用配置
 */

const webpack = require('webpack')
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiNiCssExtractPlugin = require('mini-css-extract-plugin')
const HappyPack = require('happypack')
const os = require('os')
const happyThrePool = HappyPack.ThreadPool({size: os.cpus().length})
module.exports = {
  // 入口文件
  entry: path.resolve(__dirname, '../src/main.js'),
  //输出目录、文件名
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name][hash:8].js'
  },
  //规则
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['happypack/loader?id=happyBabel'],
        exclude: /node-modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },{
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiNiCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },{
        test: /\.(png|gif|svg|jpg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 30000,
            name: "images/[name][hash:8].[ext]"
          }
        },
        'image-webpack-loader'
      ]}
    ]
  },
  stats: {
      // One of the two if I remember right
    entrypoints: false,
    children: false
  },
  //插件
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'../public/index.html'),
      filename: 'index.html',
      title: 'test'
    }),
    new CleanWebpackPlugin(),
    new MiNiCssExtractPlugin({
      filename: 'css/[name][hash:5].css',
      chunkFilename: 'css/[id].[hash:5].css'
    }),
    new HappyPack({
      id: 'happyBabel',
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true'
      }],
      threadPool: happyThrePool
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.SplitChunksPlugin()
  ]
}